<template>
  <div class="app-container flex column">
    <top-title :updateTime="true" :content="content"></top-title>
    <div class="content-wrap f1 flex column">
      <!-- 搜索部分 -->
      <div class="search-group" style="padding-left: 0">
        <div class="input-wrap">
          <div class="label">角色名称:</div>
          <div class="input-item">
            <j-input :maxLength="30" v-model="queryParam.roleName" placeholder="请输入角色名称" clearable></j-input>
          </div>
        </div>

        <div class="btn-wrap">
          <a-button class="searchBtn" @click="searchQuery()" type="primary"> 搜索 </a-button>
          <a-button class="resetBtn" @click="searchReset()" type="primary"> 重置 </a-button>
        </div>
      </div>

      <!-- 按钮功能栏 -->
      <div class="table-operator" style="border-top: 5px; padding: 0 20px 16px 20px">
        <a-button @click="handleAdd" class="BtnStyle" type="primary" icon="plus" v-has="'role:add'">新建角色</a-button>
        <a-button
          type="primary"
          icon="download"
          class="BtnStyle"
          @click="handleExportXls('角色信息')"
          v-has="'role:exportXls'"
          >导出</a-button
        >
        <a-upload
          name="file"
          v-has="'role:importXls'"
          :showUploadList="false"
          :multiple="false"
          :headers="tokenHeader"
          accept=".xls,.xlsx,"
          :action="importExcelUrl"
          @change="handleImportExcel"
        >
          <a-button type="primary" class="BtnStyle" icon="import">导入</a-button>
        </a-upload>
        <a-button
          @click="handleAddUserRole"
          class="BtnStyle"
          type="primary"
          v-if="selectedRowKeys.length !== 0"
          v-has="'role:addRoleUser'"
          >添加用户</a-button
        >
      </div>

      <!-- 表格 -->
      <div class="table-wrap f1">
        <a-table
          bordered
          ref="table"
          rowKey="id"
          class="tableList"
          :loading="loading"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          @change="handleTableChange"
          :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: 'radio' }"
        >
          <template #action="records">
            <span class="operation dropdown-color" @click="showCheckPage(records)" v-has="'role:checkRoleUser'">
              查看用户 <a-divider type="vertical" />
            </span>

            <span class="operation dropdown-color" @click="handlePerssion(records.id)" v-has="'role:authorization'">
              授权 <a-divider type="vertical" />
            </span>

            <span class="operation dropdown-color" @click="handleEdit(records)" v-has="'role:edit'">
              编辑 <a-divider type="vertical" />
            </span>

            <span class="operation dropdown-color" @click="showDelete(records)" v-has="'role:delete'">删除</span>
          </template>
        </a-table>
      </div>
    </div>
    <user-role-modal ref="modalUserRole"></user-role-modal>
    <role-modal ref="modalForm" @refresh="searchQuery"></role-modal>
    <select-User-Modal ref="selectUserModal" @refresh="searchQuery"></select-User-Modal>
    <allMessage
      ref="allMessage"
      :publicVisible="publicVisible"
      @cancel="publicVisible = false"
      @tipMessage="tipMessage"
    ></allMessage>
    <check-and-delect-user-role-batch
      @refresh="searchQuery"
      ref="checkAndDelectUserRoleBatch"
    ></check-and-delect-user-role-batch>
  </div>
</template>

<script>
import { deleteAction } from '@/api/manage'
import topTitle from '@/components/topTitle'
import JInput from '@/components/jeecg/JInput'
import allMessage from '@/components/allMessage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import RoleModal from './modules/RoleModal'
import UserRoleModal from './modules/UserRoleModal'
import SelectUserModal from './modules/SelectUserModal'
import checkAndDelectUserRoleBatch from './modules/checkAndDelectUserRoleBatch'
export default {
  name: '',
  mixins: [JeecgListMixin],
  components: {
    JInput,
    topTitle,
    allMessage,
    RoleModal,
    UserRoleModal,
    SelectUserModal,
    checkAndDelectUserRoleBatch,
  },
  data() {
    return {
      content: [['角色管理']],
      publicVisible: false,
      columns: [
        {
          title: '角色编码',
          align: 'center',
          ellipsis: true,
          dataIndex: 'roleCode',
        },
        {
          title: '角色名称',
          align: 'center',
          ellipsis: true,
          dataIndex: 'roleName',
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          ellipsis: true,
          align: 'center',
          sorter: true,
        },
        {
          title: '描述',
          dataIndex: 'description',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '操作',
          align: 'center',
          ellipsis: true,
          scopedSlots: { customRender: 'action' },
        },
      ],
      url: {
        list: '/sys/role/page',
        delete: '/sys/role/delete',
        exportXlsUrl: 'sys/role/exportXls',
        importExcelUrl: 'sys/role/importExcel',
        addUserRole: '/sys/user/addSysUserRole',
      },
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  mounted() {},
  methods: {
    showDelete(records) {
      this.publicVisible = true
      this.$refs.allMessage.show(records)
    },

    async tipMessage(records) {
      let res = await deleteAction(this.url.delete, { id: records.id })
      this.$message.success(res.message)
      this.publicVisible = false
      this.searchQuery()
    },

    handleAddUserRole() {
      if (this.currentRoleId == '') {
        this.$message.error('请选择一个角色!')
      } else {
        this.$refs.selectUserModal.show(this.selectedRowKeys[0])
      }
    },

    showCheckPage(records) {
      this.$refs.checkAndDelectUserRoleBatch.show(records)
    },

    handlePerssion(roleId) {
      this.$refs.modalUserRole.show(roleId)
    },
  },
}
</script>

<style scoped lang="less">
/deep/ .ant-upload,
.ant-upload.ant-upload-select-picture-card {
  background: var(--theme-container-bg);
  border-color: #0b3763;
}

.app-container {
  background: var(--theme-content-bg);
  padding-top: 0;
  .content-wrap {
    background: var(--theme-container-bg);
    padding: 0 30px;
    overflow: auto;
  }
}
</style>
